<template>
  <div id="app">
    <h2>第四题</h2>
    <table>
      <tr>
        <th>欢迎光临水果店</th>
      </tr>
      <tr>
        <td>苹果{{ price }}元/斤，折扣{{ discount }}折</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input type="text" v-model="num" /></td>
      </tr>
      <tr>
        <td><button @click.prevent="buyBtn">结账买单</button></td>
      </tr>
      <tr>
        <td v-if="isShow">结账单：总价0元,折后价0元,省了0元</td>
        <td v-else>
          结账单：总价{{ all }}元,折后价{{ zhe }}元,省了{{ all - zhe }}元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      num: 0,
      isShow: true,
    };
  },
  methods: {
    buyBtn() {
      if (this.num === 0) return alert("不能为0，请重新输入");
      this.isShow = false;
    },
  },
  computed: {
    all() {
      return this.price * this.num;
    },
    zhe() {
      return this.price * this.num * this.discount * 0.1;
    },
  },
};
</script>

<style>
#app {
  margin-top: 20px;
}
table {
  width: 500px;
}
th {
  font-size: 25px;
}
td {
  border: 1px solid #000;
  height: 50px;
  text-align: center;
}
</style>